<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>框模型-外边距合并</title>
    <style>
        .out-nopadding{
            outline: 2px dashed deeppink;
            margin: 20px;
            padding: 0px;
        }
        .out-padding-1px{
            outline: 2px dashed orange;
            margin: 20px;
            padding: 1px;
        }
        .out-overflow{
            outline: 2px dashed red;
            margin: 20px;
            padding: 0px;
            overflow: hidden;
        }
        .ch{
            outline: 2px solid green;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="out-nopadding">
        <div class="ch">
            fjlsdfjlksjf
        </div>
    </div>
    <div class="out-padding-1px">
        <div class="ch">
            fjsdfljslf
        </div>
    </div>
    <div class="out-overflow">
        <div class="ch">
            父元素使用overflow: （非visible）即可解决外边距合并问题
            至于原因，暂时不知道
        </div>
    </div>
</body>